<template>
  <div class="AnchorInfo_conteiner">
    <div class="AnchorInfo_content" >
      <div class="AnchorInfo_title">主播信息</div>
      <div class="AnchorInfo_intro_attention flex">
        <div @click="" class="AnchorInfo_intro_attention flex">
          <div class="AnchorInfo_img_grade">
          <img
            :src="baseurl + userInfo.logo"
            alt=""
            class="AnchorInfo_img"
          />
          <div class="AnchorI-nfo_grade">v{{ userInfo.anchorGrade }}</div>
        </div>
        <div class="AnchorInfo_intro flex_c">
          <div class="AnchorInfo_intro_name">{{ userInfo.nickname }}</div>
          <div class="AnchorInfo_intro_describe">
            {{ userInfo.personalSignature }}
          </div>
          <div class="AnchorInfo_intro_fans"> {{ followerCount }}</div>
        </div>
        </div>
        <div class="AnchorInfo_attention flex_c" @click="toLogin" :class="{'AnchorInfo_attention_change': change}">
          <div class="AnchorInfo_attention_icon">
            <i class="iconfont icon-guanzhubangshou" style="font-size: 28px; margin-bottom: 6px"></i>
          </div>
          <div class="AnchorInfo_attention_text">{{ attention }}</div>
        </div>
      </div>
    </div>

    <WrapList 
    :productionList="productionList"
    ></WrapList>

  </div>
  
</template>

<script lang="ts" setup>
import { ref, computed } from "vue"
import { useRouter } from 'vue-router'
import WrapList from '../../components/WrapList/index.vue'
import {
  type AnyObject
} from "@/apis/course";
import { onMounted } from "vue";
onMounted(()=>{
  // getSimilarAlbum()
})


const baseurl = "https://imagev2.xmcdn.com/";
const attention = ref("加关注")
const change = ref(false)
let token = localStorage.getItem('xmtoken')
const $router=useRouter()

const props = defineProps<{
  statCountInfo: AnyObject,
  userInfo: AnyObject,
  productionList: AnyObject
}>()



 
const formatNumber = (number: number) => {
  if (number >= 100000000) {
    return (number / 100000000).toFixed(2) + ' 亿';
  } else if (number >= 10000) {
    return (number / 10000).toFixed(2) + ' 万';
    
  } else {

    // return number.toString();
  }
}

// 转化数字未30.30万
const followerCount = computed(()=>{
let followerCount = formatNumber(props.statCountInfo.followerCount)
return followerCount
})

const toAnchorInfo = () => {
  $router.push({ path: '/anchordeatil' })
}

const toLogin = () => {
  if (token) {
    attention.value = "已关注"
    change.value = true
  } else {
    $router.push({ path: '/login' })
  }
}

// 相似专辑
// const getSimilarAlbum = async() => {
//   try {
//     let result = await reqSimilarAlbum()
//     console.log(result);
    
//   } catch (error) {
//     console.log(error);
//   }
// }


</script>


<style lang="less" scoped>
.AnchorInfo_conteiner {
  width: 100%;
  margin: 10px 0 0 0;
  padding-top: 15px;
  box-sizing: border-box;
  height: 315px;
  background-color: #fff;
  .AnchorInfo_content {
    padding-left: 20px;
    .AnchorInfo_title {
      font-size: 18px;
      margin-bottom: 15px;
      font-weight: bold;
    }
    .AnchorInfo_intro_attention {
      height: 65px;
      .AnchorInfo_img_grade {
        height: 65px;
        position: relative;
        .AnchorInfo_img {
          width: 54px;
          height: 54px;
          border-radius: 50%;
        }
        .AnchorI-nfo_grade {
          position: absolute;
          top: 45px;
          left: 14px;
          width: 27px;
          height: 16px;
          text-align: center;
          line-height: 16px;
          background-color: #36d6fb;
          border-radius: 12px;
          font-size: 12px;
          font-weight: bold;
          color: #fff;
        }
      }
      .AnchorInfo_intro {
        width: 255px;
        height: 65px;
        padding: 0 20px 0 10px;
        box-sizing: border-box;
        justify-content: space-evenly;
        .AnchorInfo_intro_name {
          font-size: 16px;
        }
        .AnchorInfo_intro_describe {
          font-size: 12px;
          color: #999;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .AnchorInfo_intro_fans {
          font-size: 12px;
          color: #999;
        }
      }
      .AnchorInfo_attention {
        height: 65px;
        align-items: center;
        justify-content: center;
        color: #f86442;
       
        .AnchorInfo_attention_text {
        font-size: 12px;
       
      }
      }
      .AnchorInfo_attention_change {
          color: #bababa;
        }
     
    }
  }
}


</style>
